<template>
  <div class="login">
    <div class="close">
      <span class="iconfont iconicon-test"></span>
    </div>
    <div class="logo">
      <span class="iconfont iconnew"></span>
    </div>
    <AuthInput
      type="text"
      placeholder="用户名/手机号码"
      rule="^\d{5,11}$"
      errMessage="请输入合法的用户名"
      @valchange="setUsername"
    />
    <AuthInput
      type="password"
      placeholder="密码"
      rule=".{3,6}"
      errMessage="请输入合法的密码"
      @valchange="setPassword"
    />
    <AuthBtn btnText="登录" @clickbtn="send" />
  </div>
</template>

<script>
import AuthInput from "@/components/AuthInput";
import AuthBtn from "@/components/AuthBtn";
export default {
  data() {
    return {
      username: "",
      password: ""
    };
  },
  components: {
    AuthInput,
    AuthBtn
  },
  methods: {
    send() {
      if (!this.username || !this.password) {
        this.$toast.fail("请输入账号或者密码");
        return;
      }
      //   console.log("应该发起登录请求");
      //   console.log("用户名:" + this.username);
      //   console.log("密码:" + this.password);
      //   console.log(this.$axios);
      this.$axios({
        url: "/login",
        method: "POST",
        data: {
          username: this.username,
          password: this.password
        }
      })
        .then(res => {
          console.log(res.data);
          const { message, data } = res.data;
          if (message == "登录成功") {
            this.$toast.success("登录成功");
            localStorage.setItem("token", data.token);
            localStorage.setItem("userId", data.user.id);
            setTimeout(() => {
              this.$router.replace({
                path: "/personal"
              });
            }, 1000);
          }
        })
        .catch(err => {
          console.log(err.response);
          this.$toast.fail("系统错误");
        });
    },
    setUsername(username) {
      this.username = username;
      // console.log("输入用户名是" + this.username);
    },
    setPassword(password) {
      this.password = password;
      // console.log("输入的密码是" + this.password);
    }
  }
};
</script>

<style lang='less' scoped>
.login {
  background-color: #f2f2f2;
  .close {
    margin: 5.556vw;
    span {
      font-size: 7.778vw;
      font-weight: 700;
    }
  }
  .logo {
    span {
      display: block;
      text-align: center;
      font-size: 38.889vw;
      color: #d81e06;
    }
  }
}
</style>